<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.8" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="./fabric.js"></script>
    <script src="./utils.js"></script>
    <style>
      .box{
        border: 1px solid #ccc;
      }
    </style>
    <title>大厅布局</title>
  </head>
  <body>
    <div class="w-[500px] h-[600px] mx-auto mt-[100px]">
      <h1 class="h-[40px] text-center">大厅布局</h1>
      <div class="box">
        <canvas id="canvas" width="502" height="561"></canvas>
      </div>
    </div>
    <script>
      const canvas = new fabric.Canvas("canvas");
      const groups = {}
      const renders = [
        { text: '大门', width: 90, height: 10, left: 5, top: 550, type: 'Rect',disabled: true },
        { text: '主', width: 10, height: 90, left: 0, top: 320, type: 'Rect',disabled: true },
        { text: '次', width: 10, height: 90, left: 0, top: 140, type: 'Rect',disabled: true },
        { text: '鞋柜', width: 25, height: 80, left: 95, top: 480, type: 'Rect', fontSize: 12 },
        { text: '电视柜', width: 200, height: 50, left: 100, top: 0, type: 'Rect' },
        { text: '阳台', width: 100, height: 360, left: 400, top: 0, type: 'Rect', disabled: true },
        { text: '贵妃位', width: 100, height: 180, left: 120, top: 380, type: 'Rect', groupName: 'shafa' },
        { text: '沙发', width: 240, height: 100, left: 220, top: 460, type: 'Rect', groupName: 'shafa' },
        { text: '吊床', radius: 60, left: 280, top: 220, type: 'Circle' },
      ];
      
      renders.forEach((d, i) => {
        add(d, i)
      })
    </script>
  </body>
</html>
